<template>
    <div class="modal-dialog">
        <div class="modal-dialog-con">
            <div class="modal-dialog-con-left">
                <img src="../../../public//login/login.webp" alt="">
            </div>
            <div class="modal-dialog-con-right">
                <div class="OffX"><span @click="OffClick">X</span></div>
                <div class="title">
                    <h3>{{ title.titleH3 }}</h3>
                    <div class="text">
                        <p>{{ title.username }}</p>
                        <p @click="ToLogon">{{ title.to }}</p>
                    </div>
                </div>
                <LoginOverlay v-if="!IsChecked" />
                <LgoinItem v-if="IsloginTypeTab" :IsChecked="IsChecked" @OffClick="OffClick" />
                <LogonItem v-if="!IsloginTypeTab" @ToLogon="ToLogon" />
                <div class="agreement">
                    <AnmBanner :text="'请先同意用户协议'" :width="'120px'" :height="'30px'" :background="'#FF5448'" :color="'#fff'"
                        :top="'-20px'" :left="'20px'" :position="'absolute'" :fontSize="'12px'" :borderradius="'5px'"
                        :triangleborder="'8px solid'" :trianglebordercolor="'orangered transparent transparent transparent'"
                        :triangletop="'30px'" :triangleleft="'23px'" v-if="!IsChecked">
                        <template #bannertext>
                            请先同意用户协议
                        </template>
                    </AnmBanner>
                    <input type="checkbox" :IsChecked="IsChecked" @click="Change">
                    <span>已阅读并同意</span>
                    <span class="agreementSpan">《非常秀用户服务协议》</span>
                    <span>和</span>
                    <span class="agreementSpan">《隐私协议》</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, watch } from 'vue';
// 登录界面组件
import LgoinItem from './components/LoginItem/LgoinItem.vue';
import LogonItem from './components/LogonItem/LogonItem.vue';
// 动画横幅的组件
import AnmBanner from '../Anmbanner/AnmBanner.vue';
// 遮罩层组件
import LoginOverlay from './components/Overlay/LoginOverlay.vue';
const Props = defineProps(['LogType']);
const Emit = defineEmits(['LogClick']);
const title = reactive({
    titleH3: '登录',
    username: '还有没账号？',
    to: '去注册'
});
const { titleH3, username, to } = toRefs(title);
// 复选框选中状态
const IsChecked = ref(false);
// change事件
const Change = () => {
    IsChecked.value = !IsChecked.value;
};


const IsloginTypeTab = ref(true);

// 定义一个函数ToLogon，用于切换登录注册类型
const ToLogon = () => {
    // 将IsloginTypeTab的值取反
    IsloginTypeTab.value = !IsloginTypeTab.value;
    // 如果IsloginTypeTab的值为true，则将titleH3的值设置为登录，username的值设置为“还有没有账号”，to的值设置为“去注册”
    if (IsloginTypeTab.value) {
        titleH3.value = '登录';
        username.value = '还有没账号？';
        to.value = '去注册';
        // 如果IsloginTypeTab的值为false，则将titleH3的值设置为注册，username的值设置为“已有账号去登录”，to的值设置为“去登录”
    } else {
        titleH3.value = '注册';
        username.value = '已有账号去登录？';
        to.value = '去登录';
    }
};
// 定义一个函数OffClick，用于关闭点击事件
const OffClick = () => [
    Emit('LogClick', '关闭')
];
// 监听Props的LogType属性，如果LogType的值为登录，则将IsloginTypeTab的值设置为false，调用ToLogon函数，如果LogType的值为注册，则将IsloginTypeTab的值设置为true，调用ToLogon函数
watch(Props, () => {
    if (Props.LogType === '登录') {
        IsloginTypeTab.value = false;
        ToLogon();
    } else {
        IsloginTypeTab.value = true;
        ToLogon();
    }
}, { immediate: true });
</script>

<style scoped lang="scss">
.modal-dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    animation: dialog-fadein .3s;
    display: flex;
    z-index: 99999;

    .modal-dialog-con {
        width: 800px;
        height: 540px;
        border-radius: 5px;
        margin: auto;
        z-index: 9999;
        display: flex;
        overflow: hidden;
        background: #fff;

        .modal-dialog-con-left {
            width: 45%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .modal-dialog-con-right {
            width: 55%;
            height: 100%;
            position: relative;

            .OffX {
                width: 100%;
                display: flex;
                justify-content: right;
                position: absolute;
                top: 0;
                left: 0;

                span {
                    display: flex;
                    width: 50px;
                    height: 50px;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    cursor: pointer;
                }
            }

            .title {
                width: 100%;
                height: 20%;
                display: flex;
                align-items: center;
                padding-left: 40px;

                h3 {
                    margin-right: 20px;
                }

                .text {
                    display: flex;
                    font-size: 12px;

                    p {
                        margin-top: 20px;
                    }

                    p:last-child {
                        color: blue
                    }
                }
            }

            .agreement {
                width: 100%;
                height: 10%;
                display: flex;
                align-items: center;
                font-size: 14px;
                justify-content: center;
                cursor: pointer;
                position: relative;

                input {
                    width: 15px;
                    height: 15px;
                    border: none;
                    cursor: pointer;
                }

                .agreementSpan {
                    color: blue;
                }


            }
        }
    }
}
</style>